import React, { Component } from 'react'

import Header from './components/Header'
import './App.css'
import List from './components/List/List'
import Footer from './components/Footer'


export default class App extends Component {
  // 状态在哪里操作的方法就在那里
  state = {todos:[
    {id:'001',name:'吃飯',done:true},
    {id:'002',name:'學習',done:true},
    {id:'003',name:'睡覺',done:false},

  ]}
  // 添加事件接受参数为对象
  addTodo = (todoObj)=> {
      const {todos} = this.state
      const newTodos = [todoObj,...todos]
      this.setState({todos:newTodos})
    }


  changeTodo =(id,done)=> {
    const {todos} = this.state
    // 匹配处理数据
    const newTodos =  todos.map((todoObj)=> {
      if(todoObj.id === id) return {...todoObj,done}
      else return todoObj
    })
    this.setState({todos:newTodos})

  }
  deleteTodo = (id)=> {
    const{todos} = this.state
    const newTodos =  todos.filter((todoObj)=> {
      return todoObj.id!= id
    })

    this.setState({todos:newTodos})
  }
  checkAllTodo = (done)=>{
    const {todos} = this.state

    const newTodos =  todos.map((todoObj) => {
      return{...todoObj,done}
    })
    this.setState({todos:newTodos})

  }
  clearAllDone = ()=> {
    const {todos} = this.state
    const newTodos =  todos.filter((todoObj)=> {
      return !todoObj.done
    })
    this.setState({todos:newTodos})
  }
  render() {
    const {todos} = this.state

    return (
      <div style={{position: 'absolute',left: '50%',top:'50px', marginLeft:'-250px'}}>
          <div className="todo-container">
            <div className="todo-wrap">
              <Header addTodo = {this.addTodo}/>
              <List todos = {todos} changeTodo= {this.changeTodo} deleteTodo={this.deleteTodo}/>
              <Footer todos={todos} checkAllTodo = {this.checkAllTodo} clearAllDone={this.clearAllDone}/>
            </div>
          </div>
    </div>
    )
  }
}
